<template>
    <div class="pushcoupon">
        <h3 class="cll_h3">优惠券详情</h3>
        <hr>
        <div class="formbox">
            <el-form :model="couointext" label-width="120px">
                <el-form-item label="优惠券名称">
                    <el-input v-model="couointext.name" />
                </el-form-item>
                <el-form-item label="选择指定范围">
                    <el-select v-model="couointext.scope">
                        <el-option label="通用范围" value="通用范围" />
                        <el-option label="男士餐" value="男士餐" />
                        <el-option label="女士餐" value="女士餐" />
                        <el-option label="工作餐" value="工作餐" />
                    </el-select>
                </el-form-item>
                <el-form-item label="优惠券金额">
                    <el-input v-model="couointext.sum" />
                </el-form-item>
                <el-form-item label="订单金额满">
                    <el-input v-model="couointext.condition" />
                </el-form-item>
                <el-form-item label="启用状态">
                    <el-radio-group v-model="couointext.resource">
                        <el-radio label="是" />
                        <el-radio label="否" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="发放总量">
                    <el-input v-model="couointext.ndoseame" />
                </el-form-item>
                <el-form-item label="规则描述">
                    <div id="wangeditor"></div>
                </el-form-item>
                <el-form-item label="开始时间">
                    <el-date-picker v-model="couointext.toTime" type="datetime" placeholder="起始时间" />
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker v-model="couointext.fromTime" type="datetime" placeholder="截止时间" />
                </el-form-item>
                <div class="btnbox">
                    <button class="formbtn" @click.prevent="handlereset">重置</button>
                    <button class="formbtn" @click.prevent="handlepush">保存</button>
                    <button class="formbtn" @click.prevent ='hangdleback'>取消</button>
                </div>
            </el-form>
        </div>
    </div>

</template>

<script  lang="ts">
import { defineComponent } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import E from 'wangeditor'
import { couponpush } from '@/api/coupon'

export default defineComponent({
    name: 'pushcoupon',
    data() {
        return {
            couointext:{
                name: '',
                scope: '通用范围',
                sum: 300,
                condition: 3000,
                resource: '',
                ndoseame: '',
                rule: '',
                toTime: '',
                fromTime: '',
            },
            editor: '',
        }
    },

    created(){
        if(this.$route.query.couponname){
        const {couponname,condition,ndoseame,scope,start,startTime,sum,rule} = this.$route.query
        // @ts-ignore
        this.couointext.name = couponname
         // @ts-ignore
        this.couointext.ndoseame = ndoseame
         // @ts-ignore
        this.couointext.condition = condition
         // @ts-ignore
        this.couointext.scope = scope
         // @ts-ignore
        this.couointext.resource = start
         // @ts-ignore
        this.couointext.toTime = startTime
         // @ts-ignore
        this.couointext.sum = couponname?.slice(0,-4)
         // @ts-ignore
        const res  = '<p>'+rule+'</p>'
        // @ts-ignore
        this.couointext.rule = res
           
        }
        
    },
    mounted() {
        // 富文本框
        // @ts-ignore
        this.editor = new E('#wangeditor')
        // @ts-ignore
        this.editor.config.zIndex = 0
        // @ts-ignore
        const Editor = this.editor.create()
         // @ts-ignore
        this.editor.txt.html(this.couointext.rule)

    },
    methods: {
        // 保存更改或新增
        handlepush() {
            ElMessageBox.confirm(
                '确认保存当前优惠券信息？',
                '优惠券信息确认',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'success',
                }
            )
                .then(async () => {
                    // @ts-ignore
                    this.couointext.rule = this.editor.txt.html()
                    const res = await couponpush(this.couointext)
                    console.log(res)
                    this.handlereset()
                    ElMessage({
                        type: 'success',
                        message: '保存成功',
                    })
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消保存',
                    })
                })

        },
        // 重置优惠券信息
        handlereset() {
            ElMessageBox.confirm(
                '请确认是否重置当前优惠券信息？',
                '优惠券清空重置确认',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'success',
                }
            )
                .then(() => {
                    this.resetcoupon()
                    ElMessage({
                        type: 'success',
                        message: '重置成功',
                    })
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消重置',
                    })
                })
        },
        // 重置方法
        resetcoupon(){
            this.couointext.name = ''
            this.couointext.scope = '通用范围'
            this.couointext.sum = 300
            this.couointext.condition = 3000
            this.couointext.resource = ''
            this.couointext.ndoseame = ''
            this.couointext.toTime = ''
            this.couointext.fromTime = ''
            // @ts-ignore
            this.couointext.rule =this.editor.txt.clear()
        },
        // 取消返回优惠券首页
        hangdleback(){   
            ElMessageBox.confirm(
                '确认放弃编辑当前优惠券信息？',
                '取消返回确认',
                {
                    confirmButtonText: '确认返回',
                    cancelButtonText: '继续编辑',
                    type: 'success',
                }
            )
                .then(() => {
                    this.$router.back()
                })
                .catch(() => {
                })
        },
    }
})
</script>

<style scoped lang="less">
.formbox {
    max-width: 1000px;

    .btnbox {
        display: flex;
        justify-content: center;

        .formbtn {
            width: 195px;
            height: 42px;
            border: none;
            background-color: #999;
            color: #fff;
            margin: 0 10px;
            font-size: 16px;
        }

        ;
    }
}


// 更改组件样式
:deep(.el-input__inner) {
    height: 25px;
}

:deep(.el-input) {
    width: 277px;
}

:deep(.el-popper) {
    z-index: 99999;
}
</style>
